<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue起步</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>

    <div id="app-2">
        <span v-bind:title="message">
            鼠标悬停查看绑定的提示信息
        </span>
    </div>

    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div>

    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>

    <div id="app-5">
        <p>{{message}}</p>
        <button v-on:click="reverseMsg">逆转消息</button>
    </div>

    <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>

    <!-- 自定义组件 -->
    <div id="app-7">
        <ol>
            <!-- 现在我们为每个todo-item提供待办项对象    -->
            <!-- 待办项对象是变量，即其内容可以是动态的，todo是绑定的属性 -->
            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
        </ol>
    </div>

</body>
<script>
    //mvvm双向绑定
    var app = new Vue({
        el: "#app",
        data() {
            return {
                message: "Hello Vue!"
            }
        }
    });
    // vue对象绑定dom对象属性，可以通过这个动态更改style，事件等属性
    var app2 = new Vue({
        el: "#app-2",
        data: {
            message: "页面加载于：" + new Date()
        }
    });

    // vue 条件，用v-if进行判断
    var app3 = new Vue({
        el: "#app-3",
        data: {
            seen: true
        }
    });

    // vue 循环，用v-for进行处理，格式是v-for="todo in todos" todos是vue对象里面的值
    var app4 = new Vue({
        el: "#app-4",
        data: {
            todos: [
                { text: "学习 java" },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
    });
    // 处理dom节点事件，用v-on监听事件。这里MVVM体现处理，对vue对象的更改会同步渲染到dom对象上面

    var app5 = new Vue({
        el: "#app-5",
        data: {
            message: "hello Vue.js!"
        },
        methods: {
            reverseMsg: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    });

    // 使用v-model 将vue对象和dom进行双向绑定,这里有两个dom对象和vue对象的message进行绑定
    var app6 = new Vue({
        el: "#app-6",
        data: {
            message: "Hello Vue.js !"
        }
    });

    // 定义vue组件。vue组件也可以看做成一个dom对象，所以v-if,v-for,v-bind之类的命令同样有效

    //先定义组件
    Vue.component("todo-item", {
        //定义属性,这个todo的值由父节点传递进来，子节点负责渲染
        props: ["todo"],
        template: '<li>{{todo.text}}</li>'
    });

    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                { text: '蔬菜' },
                { text: '奶酪' },
                { text: '随便其他什么人吃的东西' }
            ]
        }
    });

</script>

</html>